<template>
	<view class="withdCom">
		<navBar isBack backColor="#fff" title="提现" color="#fff" background="linear-gradient(45deg, #5B6E84 0%, #40464D 100%)"></navBar>
		<view class="selectBank">
			<h2>提现到银行卡</h2>
			<view class="bankBox" v-if="Object.keys(this.cardInfo).length != 0">
				<!-- <image src="../../../static/login/logo.png" mode=""></image> -->
				<view class="right" @click="toSelectBankCard">
					<view class="name">
						{{ cardInfo.bank_name }}
						<text>尾号{{ cardInfo.bank_num }} {{ cardInfo.type == 1 ? '储蓄卡' : '信用卡' }}</text>
					</view>
					<view class="iconfont icon-jinru"></view>
				</view>
			</view>
			<view class="bankBox" v-else>
				<view class="notCard" @click="toSelectBankCard">
					点击选择银行卡
					<view class="iconfont icon-jinru"></view>
				</view>
			</view>
		</view>
		<view class="wC_comMoney">
			<h2>提现金额</h2>
			<view class="wC_moneyNum">
				￥
				<input v-model="priceNum" @input="handleInput" type="digit" maxlength="8" value="" />
			</view>
			<view class="wC_border"></view>
			<view class="wC_serviceMoney">手续费：{{freePrice}} 元</view>

			<!-- 有佣金余额时 -->
			<view class="wC_balance">
				<view>
					可提现金额
					<span>{{ allCanPrice }}</span>
					元
				</view>
				<view class="wC_comAllBtn" @click="allPutBtn">全部提现</view>
			</view>

			<!-- 提现按钮 -->
			<button :disabled="buttonStatus" :class="{ putBtnActive: buttonStatus }" type="default" @click="cashOut">提现</button>
		</view>
	</view>
</template>

<script>
import service_distri from '@/service/distri.js';
import navBar from '@/components/navBar/navBar.vue';
export default {
	components: {
		navBar
	},
	data() {
		return {
			canComMoney: false, //是否有可提现佣金
			cardInfo: {},
			priceNum: '',
			allCanPrice: 0,
			level: null
		};
	},
	computed: {
		buttonStatus() {
			if (this.priceNum && this.priceNum * 1 >= 0.01 && this.cardInfo.card_id && this.priceNum * 1 <= this.allCanPrice * 1) {
				return false;
			} else {
				return true;
			}
		},
		
		// 手续费
		freePrice(){
			let free = '0.00'
			return free = (this.priceNum*0.005).toFixed(2)
		}
	},
	onLoad(options) {
		this.allCanPrice = options.allCanPrice; //所有金额
		this.level = options.level; //0商家，1创客
		console.log(this.level, '商家还是创客');
	},
	methods: {
		// 选择银行卡
		toSelectBankCard() {
			// uni.navigateTo({
			// 	url: `/pagesOne/distri/bindBankCard/cardManage?level=${this.level}&type=true`
			// });
			uni.navigateTo({
				url:`/pages_Verification/verification/bankCard/bankCardList?level=${this.level}&type=true`
			})
		},
		// 提现按钮
		cashOut() {
			let params = {
				amount: this.priceNum,
				card_id: this.cardInfo.card_id,
				level: this.level
			};
			console.log(params, '提现数据');
			service_distri.toCashOut(params).then(res => {
				console.log(res, '提现结果');
				if (res.code == 1) {
					uni.showToast({
						title: '提现申请已提交',
						icon: 'success'
					});
					this.allCanPrice = this.allCanPrice - this.priceNum;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		// 全部提现按钮
		allPutBtn() {
			this.priceNum = this.allCanPrice;
		},

		// 输入金额验证
		handleInput(e) {
			let amount = e.detail.value;
			// amount= /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(amount) ? amount : amount.substring(0,amount.length-1)
			amount = amount.replace(/[^\d.]/g, ''); //清除“数字”和“.”以外的字符
			amount = amount.replace(/\.{2,}/g, '.'); //只保留第一个. 清除多余的
			amount = amount
				.replace('.', '$#$')
				.replace(/\./g, '')
				.replace('$#$', '.');
			amount = amount.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
			if (amount.indexOf('.') < 0 && amount != '') {
				//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
				amount = parseFloat(amount);
			} else if (amount.indexOf('.') == 0) {
				//首为小数点，补全
				amount = amount.replace(/[^$#$]/g, '0.');
				amount = amount.replace(/\.{2,}/g, '.');
			}
			setTimeout(() => {
				this.priceNum = Number(amount);
			}, 1);
		}
	}
};
</script>

<style lang="scss" scoped>
.withdCom {
	.selectBank {
		width: 702rpx;
		// height: 578rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin: 40rpx auto 0;
		padding: 40rpx 40rpx;
		.notCard {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.iconfont {
				font-size: 24rpx;
				color: #d8d8d8;
			}
		}
		h2 {
			font: 600 30rpx/40rpx PingFang SC;
			color: #0a0605;
		}
		.bankBox {
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #f5f5f5;
			padding: 44rpx 0;
			image {
				margin-right: 36rpx;
				flex-shrink: 0;
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
			}
			.right {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.name {
					display: flex;
					flex-direction: column;
					font: 600 26rpx/40rpx PingFang SC;
					color: #0a0605;
					text {
						margin-top: 8rpx;
						font-weight: 400;
						color: #6c6c6c;
					}
				}
				.iconfont {
					font-size: 24rpx;
					color: #d8d8d8;
				}
			}
		}
	}
	.wC_comMoney {
		width: 702rpx;
		height: 578rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin: 0rpx auto 0;
		padding: 40rpx 40rpx;
		h2 {
			font: 600 30rpx/40rpx PingFang SC;
			color: #0a0605;
		}
		.wC_moneyNum {
			display: flex;
			height: 84rpx;
			align-items: center;
			margin: 36rpx 0;
			font: 600 30rpx/84rpx PingFang SC;
			color: #0a0605;
			input {
				height: 84rpx;
				font-size: 56rpx;
				margin-left: 16rpx;
			}
		}
		.wC_border {
			width: 100%;
			height: 0;
			border: 2rpx solid #f5f5f5;
		}
		.wC_serviceMoney {
			font: 600 28rpx/40rpx PingFang SC;
			margin: 40rpx 0 0rpx 0;
		}
		.wC_balance {
			display: flex;
			margin-top: 32rpx;
			justify-content: space-between;
			font: 400 26rpx/36rpx PingFang SC;
			span {
				color: #fa4e37;
				margin: 0 10rpx;
			}
			.wC_comAllBtn {
				font-weight: 600;
				color: #0a0605;
			}
		}
		button {
			width: 520rpx;
			height: 92rpx;
			background-color: #dba954;
			margin-top: 68rpx;
			border-radius: 46rpx;
			font: 600 32rpx/92rpx PingFang SC;
			color: #fff;
		}
		.putBtnActive {
			opacity: 0.5;
		}
	}
}
</style>
